<template>
  <thead :class="theadClass">
    <tr>
      <th
        v-for="column in tableColumns"
        :key="column.key"
        :class="[
                      getThClass(column),
                      {
                        'text-bold text-black': sort.fieldName === column.key,
                      },
                    ]"
        @click="changeSorting(column)"
      >
        {{ column.label }}
        <span
          v-if="sort.fieldName === column.key && sort.order === 'asc'"
          class="asc-direction"
        >
                      ↑
                    </span>
        <span
          v-if="
                        sort.fieldName === column.key && sort.order === 'desc'
                      "
          class="desc-direction"
        >
                      ↓
                    </span>
      </th>
    </tr>
  </thead>
</template>

<script setup>
const emit = defineEmits(['changeSorting'])

const props = defineProps({
  theadClass: {type: String, default: 'bg-gray-50'},
  tableColumns: {type: Array, default: []},
})

function getThClass(column) {
  let classes =
    'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'

  if (column.defaultThClass) {
    classes = column.defaultThClass
  }

  if (column.sortable) {
    classes = `${classes} cursor-pointer`
  } else {
    classes = `${classes} pointer-events-none`
  }

  if (column.thClass) {
    classes = `${classes} ${column.thClass}`
  }

  return classes
}

</script>
